﻿<script src="~/vue/dist/vue.global.js"></script>
<link href="~/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/element-plus/dist/index.full.js"></script>
<script src="~/axios/dist/axios.js"></script>
<html>
<head>
    <link href="~/css/table.css" rel="stylesheet" />
    <style scoped>
        .avatar-uploader .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

            .avatar-uploader .el-upload:hover {
                border-color: var(--el-color-primary);
            }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-form name="humanfileForm" method="post" ref="ruleFormRef"
                 :model="ruleForm"
                 :rules="rules"
                 label-width="120px"
                 class="demo-ruleForm">
            <table width="100%">
                <tr>
                    <td>
                        <font color="black">您正在做的业务是：人力资源--人力资源档案管理--人力资源档案登记 </font>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <el-button v-on:click="add()">提交</el-button>
                        <el-button v-on:click="reset()">清除</el-button>
                    </td>
                </tr>
            </table>
            <table width="100%" border="1" cellpadding=3 cellspacing=1
                   bordercolorlight=#848284 bordercolordark=#eeeeee
                   class="TABLE_STYLE1">
                <tr>
                    <td class="TD_STYLE1" width="11%">
                        I级机构
                    </td>
                    <td width="14%" class="TD_STYLE2">
                        @* <el-form-item prop="FirstKind"> *@
                        <el-form-item prop="firstKind">
                            <el-select v-model="ruleForm.firstKind" placeholder="请选择I级机构名称" value-key="firstKindId" v-on:change="one" style="width: 100%" size="small">
                                <el-option v-for="item in CFFKOption"
                                           :key="item.firstKindId"
                                           :label="item.firstKindName"
                                           :value="item" />
                            </el-select>
                        </el-form-item>
                        @* </el-form-item> *@
                    </td>
                    <td width="11%" class="TD_STYLE1">
                        II级机构
                    </td>
                    <td width="14%" class="TD_STYLE2">
                        <el-form-item prop="secondKind">
                            <el-select v-model="ruleForm.secondKind" placeholder="请选择II级机构名称" value-key="secondKindId" v-on:change="two" style="width: 100%" size="small">
                                <el-option v-for="item in CFSKOption"
                                           :key="item.secondKindId"
                                           :label="item.secondKindName"
                                           :value="item" />
                            </el-select>
                        </el-form-item>
                    </td>
                    <td width="11%" class="TD_STYLE1">
                        III级机构
                    </td>
                    <td class="TD_STYLE2" colspan="2">
                        <el-form-item prop="thirdKind">
                            <el-select v-model="ruleForm.thirdKind" placeholder="请选择III级机构名称" value-key="thirdKindId" style="width: 100%" size="small">
                                <el-option v-for="item in CFTKOption"
                                           :key="item.thirdKindId"
                                           :label="item.thirdKindName"
                                           :value="item" />
                            </el-select>
                        </el-form-item>
                    </td>
                    @* <td rowspan="5" style="text-align: center; border: 1px solid; width: 178px; height: 178px;">
                        <el-upload class="avatar-uploader"
                                   :show-file-list="false"
                                   :on-success="handleAvatarSuccess"
                                   :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 178px; height: 178px;" />
                            <el-icon v-else class="avatar-uploader-icon">点击上传相片</el-icon>
                        </el-upload>
                    </td> *@
                    <td rowspan="5" style="text-align: center; border: 1px solid; width: 178px; height: 178px;">
@*                         <el-form-item>
                            <label :class="'avatar-label'" style="position:relative;right:0px">
                                <el-avatar :src="ruleForm.humanPicture" :size="180" fit="cover" v-on:click="triggerFileInput"></el-avatar>
                                <input id="avatarUpload" type="file" accept="image/*" v-on:change="onFileChange" style="display: none;" />
                            </label>
                            <!-- 添加的按钮 -->
                            @* <el-button type="primary" v-on:click="triggerFileInput" style="position:relative;right:-50px">上传头像</el-button>
                          <input id="avatarUpload" type="file" accept="image/*" v-on:change="onFileChange" style="display: none;" /> 
                        </el-form-item> *@
                        <el-form-item>
                            <label :class="'avatar-label'" style="position:relative;right:0px">
                                <el-avatar :src="ruleForm.humanPicture" :size="180" fit="cover"></el-avatar>
                            </label>
                            <!-- 添加的按钮 -->
                            <el-button type="primary" v-on:click="triggerFileInput" style="position:relative;right:-50px">上传头像</el-button>
                            <input id="avatarUpload" type="file" accept="image/*" v-on:change="onFileChange" style="display: none;" />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        职位分类
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="humanMajorKind">
                            <el-select v-model="ruleForm.humanMajorKind" placeholder="请选择职位分类" value-key="majorKindId" v-on:change="Three" style="width: 100%" size="small">
                                <el-option v-for="item in CMKOption"
                                           :key="item.majorKindId"
                                           :label="item.majorKindName"
                                           :value="item" />
                            </el-select>
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        职位名称
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="humanMajor">
                            <el-select v-model="ruleForm.humanMajor" placeholder="请选择职位昵称" value-key="majorId" style="width: 100%" size="small">
                                <el-option v-for="item in CMOption"
                                           :key="item.majorId"
                                           :label="item.majorName"
                                           :value="item" />
                            </el-select>
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        职称
                    </td>
                    <td colspan="2" class="TD_STYLE2">
                        <el-form-item prop="humanProDesignation">
                            <el-select v-model="ruleForm.humanProDesignation" placeholder="请选择职称" value-key="attributeName" style="width: 100%" size="small">
                                <el-option v-for="item in HumanProDesignation"
                                           :key="item.attributeName"
                                           :label="item.attributeName"
                                           :value="item.attributeName" />
                            </el-select>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        姓名
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="humanName">
                            <el-input v-model="ruleForm.humanName" class="INPUT_STYLE2" size="small" />
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        性别
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="humanSex">
                            <el-select v-model="ruleForm.humanSex" placeholder="请选择性别" style="width: 100%" size="small">
                                <el-option v-for="item in sex"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        EMAIL
                    </td>
                    <td colspan="2" class="TD_STYLE2">
                        <el-form-item prop="humanEmail">
                            <el-input v-model="ruleForm.humanEmail" class="INPUT_STYLE2" size="small" />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        电话
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="humanTelephone">
                            <el-input v-model="ruleForm.humanTelephone" class="INPUT_STYLE2" size="small"/>
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        QQ
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="humanQQ">
                            <el-input v-model="ruleForm.humanQQ" class="INPUT_STYLE2" size="small" oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        手机
                    </td>
                    <td colspan="2" class="TD_STYLE2">
                        <el-form-item prop="humanMobilephone">
                            <el-input v-model="ruleForm.humanMobilephone" class="INPUT_STYLE2" size="small" oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        住址
                    </td>
                    <td colspan="3" class="TD_STYLE2">
                        <el-form-item prop="humanAddress">
                            <el-input v-model="ruleForm.humanAddress" class="INPUT_STYLE2" size="small" />
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        邮编
                    </td>
                    <td colspan="2" class="TD_STYLE2">
                        <el-form-item prop="humanPostcode">
                            <el-input v-model="ruleForm.humanPostcode" class="INPUT_STYLE2" size="small" />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        国籍
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="humanNationality">
                            <el-select v-model="ruleForm.humanNationality" placeholder="请选择国籍" value-key="attributeName" style="width: 100%" size="small">
                                <el-option v-for="item in HumanNationality"
                                           :key="item.attributeName"
                                           :label="item.attributeName"
                                           :value="item.attributeName" />
                            </el-select>
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        出生地
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="humanBirthplace">
                            <el-input v-model="ruleForm.humanBirthplace" class="INPUT_STYLE2" size="small" />
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        生日
                    </td>
                    <td width="13%" class="TD_STYLE2">
                        <el-form-item prop="humanBirthday">
                            <el-date-picker v-model="ruleForm.humanBirthday"
                                            type="date"
                                            placeholder="请选择出生日期"
                                            :size="size" readonly />
                        </el-form-item>
                    </td>
                    <td width="11%" class="TD_STYLE1">
                        民族
                    </td>
                    <td class="TD_STYLE2" width="14%">
                        <el-form-item prop="humanRace">
                            <el-select v-model="ruleForm.humanRace" placeholder="请选择民族" value-key="attributeName" style="width: 100%" size="small">
                                <el-option v-for="item in HumanRace"
                                           :key="item.attributeName"
                                           :label="item.attributeName"
                                           :value="item.attributeName" />
                            </el-select>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        宗教信仰
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="humanReligion">
                            <el-select v-model="ruleForm.humanReligion" placeholder="请选择宗教信仰" value-key="attributeName" style="width: 100%" size="small">
                                <el-option v-for="item in HumanReligion"
                                           :key="item.attributeName"
                                           :label="item.attributeName"
                                           :value="item.attributeName" />
                            </el-select>
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        政治面貌
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="humanParty">
                            <el-select v-model="ruleForm.humanParty" placeholder="请选择政治面貌" value-key="attributeName" style="width: 100%" size="small">
                                <el-option v-for="item in HumanParty"
                                           :key="item.attributeName"
                                           :label="item.attributeName"
                                           :value="item.attributeName" />
                            </el-select>
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        身份证号码
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="humanIdCard">
                            <el-input v-model="ruleForm.humanIdCard" class="INPUT_STYLE2" size="small" oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        社会保障号码
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="humanSocietySecurityId">
                            <el-input v-model="ruleForm.humanSocietySecurityId" class="INPUT_STYLE2" size="small" oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        年龄
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="humanAge">
                            <el-input v-model="ruleForm.humanAge" class="INPUT_STYLE2" size="small" readonly />
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        学历
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="humanEducatedDegree">
                            <el-select v-model="ruleForm.humanEducatedDegree" placeholder="请选择学历" value-key="attributeName" style="width: 100%" size="small">
                                <el-option v-for="item in HumanEducatedDegree"
                                           :key="item.attributeName"
                                           :label="item.attributeName"
                                           :value="item.attributeName" />
                            </el-select>
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        教育年限
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="humanEducatedYears">
                            <el-select v-model="ruleForm.humanEducatedYears" placeholder="请选择教育年限" value-key="attributeName" style="width: 100%" size="small">
                                <el-option v-for="item in HumanEducatedYears"
                                           :key="item.attributeName"
                                           :label="item.attributeName"
                                           :value="item.attributeName" />
                            </el-select>
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        学历专业
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="humanEducatedMajor">
                            <el-select v-model="ruleForm.humanEducatedMajor" placeholder="请选择学历专业" value-key="attributeName" style="width: 100%" size="small">
                                <el-option v-for="item in HumanEducatedMajor"
                                           :key="item.attributeName"
                                           :label="item.attributeName"
                                           :value="item.attributeName" />
                            </el-select>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        薪酬标准
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="salaryStandard">
                            <el-select v-model="ruleForm.salaryStandard" placeholder="请选择薪酬标准" value-key="standardId" style="width: 100%" size="small">
                                <el-option v-for="item in SalaryStandard"
                                           :key="item.standardId"
                                           :label="item.standardName"
                                           :value="item" />
                            </el-select>
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        开户行
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="humanBank">
                            <el-input v-model="ruleForm.humanBank" class="INPUT_STYLE2" size="small" />
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        帐号
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="humanAccount">
                            <el-input v-model="ruleForm.humanAccount" class="INPUT_STYLE2" size="small" oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        登记人
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="register">
                            <el-input v-model="ruleForm.register" class="INPUT_STYLE2" size="small" readonly />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        建档时间
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="registTime">
                            <el-input v-model="ruleForm.registTime" readonly class="right-aligned-input" style="width: 100%;"></el-input>
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        特长
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="humanSpeciality">
                            <el-select v-model="ruleForm.humanSpeciality" placeholder="请选择特长" value-key="attributeName" style="width: 100%" size="small">
                                <el-option v-for="item in HumanSpeciality"
                                           :key="item.attributeName"
                                           :label="item.attributeName"
                                           :value="item.attributeName" />
                            </el-select>
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        爱好
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="humanHobby">
                            <el-select v-model="ruleForm.humanHobby" placeholder="请选择爱好" value-key="attributeName" style="width: 100%" size="small">
                                <el-option v-for="item in HumanHobby"
                                           :key="item.attributeName"
                                           :label="item.attributeName"
                                           :value="item.attributeName" />
                            </el-select>
                        </el-form-item>
                    </td>
                    <td class="TD_STYLE1">
                        &nbsp;
                    </td>
                    <td class="TD_STYLE2">
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        个人履历
                    </td>
                    <td colspan="7" class="TD_STYLE2">
                        <el-form-item prop="humanHistroyRecords">
                            <el-input v-model="ruleForm.humanHistroyRecords"
                                      style="width: 100%"
                                      :rows="3"
                                      type="textarea" />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        家庭关系信息
                    </td>
                    <td colspan="7" class="TD_STYLE2">
                        <el-form-item prop="humanFamilyMembership">
                            <el-input v-model="ruleForm.humanFamilyMembership"
                                      style="width: 100%"
                                      :rows="3"
                                      type="textarea" />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        备注
                    </td>
                    <td colspan="7" class="TD_STYLE2">
                        <el-form-item prop="remark">
                            <el-input v-model="ruleForm.remark"
                                      style="width: 100%"
                                      :rows="3"
                                      type="textarea" />
                        </el-form-item>
                    </td>
                </tr>
            </table>
        </el-form>
    </div>
</body>
</html>
<script>
    window.userTrueName = '@ViewBag.UserTrueName'; // 将ViewBag的值赋给全局变量，方便Vue实例获取
    const { createApp, ref, reactive, computed, onMounted ,watch} = Vue;
    const { ElMessage,ElNotification, ElAvatar, ElButton } = ElementPlus;
    var app = createApp({
        setup() {
            const ruleFormRef = ref(null);
            const ruleForm = reactive({
                humanId: "",//档案编号
                firstKind: {},//一级机构，对象获取FirstKindId，FirstKindName
                secondKind: {},//二级机构，对象获取SecondKindId,SecondKindName
                thirdKind: {},//三级机构，对象获取ThirdKindId，ThirdKindName
                humanMajorKind: {},//职位分类，对象获取HumanMajorKindId，HumanMajorKindName
                humanMajor: {},//职位，对象获取HunmaMajorId,HunmaMajorName
                humanName: "",//姓名
                humanAddress: "",//地址
                humanPostcode: "",//邮政编码
                humanProDesignation: "",//昵称,
                humanTelephone: "",//电话
                humanMobilephone: "",//手机号码
                humanBank: "",//开户银行
                humanAccount: "",//银行账号
                humanQQ: "",//QQ号码
                humanEmail: "",//电子邮箱
                humanHobby: "",//爱好
                humanSpeciality: "",//特长
                humanSex: "",//性别
                humanReligion: "",//宗教信仰
                humanParty: "",//政治面貌
                humanNationality: "",//国籍
                humanRace: "",//民族
                humanBirthday: "",//出生日期/生日
                humanBirthplace: "",//出生地
                humanAge: "",//年龄
                humanEducatedDegree: "",//学历
                humanPicture: "",//相片
                humanEducatedYears: "",//教育年限
                humanEducatedMajor: "",//学习专业
                humanSocietySecurityId: "",//社会保障号码

                humanIdCard: "",//身份证号码
                remark: "",//备注
                salaryStandard: {},//薪酬标准，对象获取SalaryStandardId，SalaryStandardName,SalarySum
                humanHistroyRecords: "",//个人履历
                humanFamilyMembership: "",//家庭关系
                registTime: "",//登记时间
                register: window.userTrueName,//登记人
                humanFileStatus: "正常",//档案状态
                checkStatus: "未复核",//复核状态
                status:true
            })

            ruleForm.firstKind = "";//清空一级下拉框
            ruleForm.secondKind = "";//清二级下拉框
            ruleForm.thirdKind = "";//清空三级下拉框
            const CFFKOption = ref([])//一级机构下拉框数据
            const CFFKId = ref(null);//保存一级数据的id
            const CFSKOption = ref([]);//二级机构下拉框数据
            const CFSKId = ref(null);//保存二级数据的id
            const CFTKOption = ref([]);//三级机构下拉框数据

            ruleForm.humanMajor = "";//清空职位分类下拉框
            const CMKOption = ref([]);//保存职位分类下拉框数据
            const CMKId = ref(null);//保存职位分类数据的Id
            const CMOption = ref([]);//保存职位昵称下拉框数据
            var timi = ref(null);

            const HumanProDesignation = ref()//保存职称下拉框数据
            const sex = [
                {
                    value: "男",
                    label: "男"
                },
                {
                    value: "女",
                    label: "女"
                }
            ]
            const HumanNationality = ref()//保留国籍下拉框数据
            const HumanRace = ref()//保留民族下拉框数据
            const HumanReligion = ref()//保留宗教信仰下拉框数据
            const HumanParty = ref()//保留政治面貌下拉框数据
            const HumanEducatedDegree = ref()//保留学历下拉框数据
            const SalaryStandard = ref()//保留薪酬标准下拉框数据
            const HumanEducatedYears = ref()//保留教育年限下拉框数据
            const HumanEducatedMajor = ref()//保留学历专业下拉框数据
            const HumanSpeciality = ref()//保留特长下拉框数据
            const HumanHobby = ref()//保留爱好下拉框数据

            // 初始化时获取当前时间
            const tick = () => {
                const now = new Date();
                ruleForm.registTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
                setTimeout(tick, 1000);
            };
            const initData = async () => {
                await CMKSelect();
                await CFFKSelectOption();
                fill();
            };
            onMounted(() => {
                initData();
                tick();
                ruleForm.registTime = timi.value
            });

            const time = ref(new Date().toISOString());
            setInterval(() => {
                time.value = new Date().toISOString();
            }, 1000);

            //查询一级下拉框
            function CFFKSelectOption() {
                axios.get("/EMR/CFFKSelectOption").then(res => {
                    CFFKOption.value = res.data;
                }).catch(Error => {
                    console.log(Error)
                })
            }
            //一级下拉框点击事件
            function one(value) {
                CFFKId.value = value.firstKindId
                ruleForm.secondKind = ""
                ruleForm.thirdKind = ""
                CFSKSelectOption();
            }
            //查询二级下拉框
            function CFSKSelectOption() {
                axios.get("/EMR/CFSKSelectid", {
                    params: {
                        id: CFFKId.value
                    }
                }).then(res => {
                    CFSKOption.value = res.data
                }).catch(err => {
                    console.info(err)
                })
            }
            //点击二级下拉框
            function two(value) {
                console.info(value)
                CFSKId.value = value.secondKindId
                ruleForm.thirdKind = ""
                CFTKSelectOption();
            }
            //查询三级下拉框
            function CFTKSelectOption() {
                axios.get("/EMR/CFTKSelectCFSKCFFKId", {
                    params: {
                        fid: CFFKId.value,
                        sid: CFSKId.value
                    }
                }).then(res => {
                    CFTKOption.value = res.data
                }).catch(err => {
                    console.info(err)
                })
            }
            //查询职位分类下拉框
            function CMKSelect() {
                axios.get("/EMR/CMKSelectMax").then(res => {
                    CMKOption.value = res.data
                    console.info(CMKOption.value)
                }).catch(err => {
                    console.info(err)
                })
            }
            //点击职位分类下拉框
            function Three(value) {
                CMKId.value = value.majorKindId
                CMSelect();
            }
            //根据职位分类查询出职位昵称
            function CMSelect() {
                axios.get("/EMR/CMSelectId", {
                    params: {
                        id: CMKId.value
                    }
                }).then(res => {
                    CMOption.value = res.data
                }).catch(err => {
                    console.info(err)
                })
            }

            // CMKSelect();
            // CFFKSelectOption();

            //查询下拉框数据
            function fill() {
                axios.get("/HF/ZCSelect").then(res => {
                    HumanProDesignation.value = res.data
                }).catch(error => {
                    console.info(error)
                })
                axios.get("/HF/GJSelect").then(res => {
                    HumanNationality.value = res.data
                }).catch(error => {
                    console.info(error)
                })
                axios.get("/HF/MZSelect").then(res => {
                    HumanRace.value = res.data
                }).catch(error => {
                    console.info(error)
                })
                axios.get("/HF/ZJXYSelect").then(res => {
                    HumanReligion.value = res.data
                }).catch(error => {
                    console.info(error)
                })
                axios.get("/HF/ZZMMSelect").then(res => {
                    HumanParty.value = res.data
                }).catch(error => {
                    console.info(error)
                })
                axios.get("/HF/XLSelect").then(res => {
                    HumanEducatedDegree.value = res.data
                }).catch(error => {
                    console.info(error)
                })
                axios.get("/HF/XCBZSelect").then(res => {
                    SalaryStandard.value = res.data
                }).catch(error => {
                    console.info(error)
                })
                axios.get("/HF/JYNXSelect").then(res => {
                    HumanEducatedYears.value = res.data
                }).catch(error => {
                    console.info(error)
                })
                axios.get("/HF/XLZYSelect").then(res => {
                    HumanEducatedMajor.value = res.data
                }).catch(error => {
                    console.info(error)
                })
                axios.get("/HF/TCSelect").then(res => {
                    HumanSpeciality.value = res.data
                }).catch(error => {
                    console.info(error)
                })
                axios.get("/HF/AHSelect").then(res => {
                    HumanHobby.value = res.data
                }).catch(error => {
                    console.info(error)
                })
                //查询录用通过的数据
                axios.get("/HF/SelectId").then(res => {
                    //firstKind
                    //secondKind
                    //thirdKind
                    ruleForm.humanSex = res.data.humanSex,
                    ruleForm.humanName = res.data.humanName,

                    // ruleForm.humanMajorKind = res.data.humanMajorKindId,
                    // ruleForm.humanMajorKind = res.data.humanMajorKindName,
                    // ruleForm.humanMajor = res.data.humanMajorId,
                    // ruleForm.humanMajor = res.data.hunmaMajorName,
                    ruleForm.humanMajorKind = {
                        majorKindId: res.data.humanMajorKindId,
                        majorKindName: res.data.humanMajorKindName
                    };
                    const selectedId = res.data.humanMajorKindId;
                    const matchedOption = CMKOption.value.find((option) => option.majorKindId === selectedId);
                    if (matchedOption) {
                        ruleForm.humanMajorKind = matchedOption; // 设置选中值
                        ruleFormRef.value.validateField('humanMajorKind'); // 手动触发验证，确保视图更新
                    }
                    console.info(ruleForm.humanMajorKind)
                    ruleForm.humanMajor = {
                        majorId: res.data.humanMajorId,
                        majorName: res.data.hunmaMajorName
                    };


                    ruleForm.humanEmail = res.data.email,
                    ruleForm.humanTelephone = res.data.humanTelephone,
                    ruleForm.humanMobilephone = res.data.humanMobilephone,
                    ruleForm.humanAddress = res.data.humanAddress,
                    ruleForm.humanPostcode = res.data.humanPostcode,
                    ruleForm.humanNationality = res.data.humanNationality,
                    ruleForm.humanBirthplace = res.data.humanBirthplace,
                    ruleForm.humanBirthday = res.data.humanBirthday,
                    ruleForm.humanRace = res.data.humanRace,
                    ruleForm.humanReligion = res.data.humanReligion,
                    ruleForm.humanParty = res.data.humanParty,
                    ruleForm.humanIdCard = res.data.humanIdcard,
                    ruleForm.humanAge = res.data.humanAge,
                    ruleForm.humanEducatedDegree = res.data.humanEducatedDegree,
                    ruleForm.humanEducatedYears = res.data.humanEducatedYears,
                    ruleForm.humanEducatedMajor = res.data.humanEducatedMajor,
                    ruleForm.humanSpeciality = res.data.humanSpeciality,
                    ruleForm.humanHobby = res.data.humanHobby,
                    ruleForm.humanHistroyRecords = res.data.humanHistoryRecords,
                    ruleForm.remark = res.data.remark,
                    ruleForm.humanPicture = res.data.humanPicture,
                    ruleForm.status = true
                    console.info(ruleForm)
                }).catch(err=>{
                    console.info(err)
                })
            }
            //长富的代码
            const avatarUrl = ref('默认图片链接'); // 设置默认图片链接

            const triggerFileInput = () => {
                document.getElementById('avatarUpload').click();
            };

            const onFileChange = async (e) => {
                const file = e.target.files[0];
                if (!file) return;

                // 显示本地预览
                avatarUrl.value = URL.createObjectURL(file);

                // 准备FormData对象
                const formData = new FormData();
                formData.append('avatar', file);

                try {
                    // 发送POST请求上传文件
                    const response = await fetch('/ER/UploadAvatar', { // 注意这里的路径需要匹配后端路由
                        method: 'POST',
                        body: formData,
                    });

                    if (response.ok) {
                        const result = await response.json(); // 假设服务器返回包含文件路径的信息
                        const serverFilePath = result.filePath; // 从服务器响应中获取文件路径

                        // 更新avatarUrl为服务器上的实际路径
                        avatarUrl.value = serverFilePath

                        ruleForm.humanPicture = serverFilePath
                        console.info(ruleForm)

                        ElNotification({
                            title: '成功',
                            message: '头像上传成功',
                            type: 'success',
                        });
                    } else {
                        console.error('文件上传失败:', response.statusText);
                        ElNotification({
                            title: '错误',
                            message: '头像上传失败，请重试。',
                            type: 'error',
                        });
                    }
                } catch (error) {
                    console.error('发生错误:', error);
                    ElNotification({
                        title: '错误',
                        message: '发生了意外错误，请稍后再试。',
                        type: 'error',
                    });
                }
            };
            // fill()

            //上传相片
            // const imageUrl = ref('')
            // const selectedFile = ref(null);//用来存储图片
            // // 上传成功回调
            // const handleAvatarSuccess = (response, uploadFile) => {
            //     imageUrl.value = URL.createObjectURL(uploadFile.raw);
            // };

            // // 上传前校验
            // const beforeAvatarUpload = (rawFile) => {
            //     if (rawFile.type !== 'image/jpeg') {
            //         ElMessage.error('Avatar picture must be JPG format!');
            //         return false;
            //     } else if (rawFile.size / 1024 / 1024 > 2) {
            //         ElMessage.error('Avatar picture size can not exceed 2MB!');
            //         return false;
            //     }
            //     imageUrl.value = URL.createObjectURL(rawFile);//显示预览
            //     selectedFile.value = rawFile;
            //     return true;
            // };

            //非空
            const rules = ref({
                firstKind: [{ required: true, message: '请选择I级机构', trigger: 'change' }],
                secondKind: [{ required: true, message: '请选择II级机构', trigger: 'change' }],
                thirdKind: [{ required: true, message: '请选择IIII级机构', trigger: 'change' }],
                humanMajorKind: [{ required: true, message: '请选择职位分类', trigger: 'change' }],
                humanMajor: [{ required: true, message: '请选择职位昵称', trigger: 'change' }],
                humanProDesignation: [{ required: true, message: '请选择职称', trigger: 'change' }],
                humanName: [{ required: true, message: '请输入姓名', trigger: 'change' }],
                humanSex: [{ required: true, message: '请选择性别', trigger: 'change' }],
                humanEmail: [{ required: true, message: '请输入Email', trigger: 'change' }],
                humanTelephone: [{ required: true, message: '请输入电话', trigger: 'change' }],
                humanQQ: [{ required: true, message: '请输入QQ', trigger: 'change' }],
                humanMobilephone: [{ required: true, message: '请输入手机', trigger: 'change' }],
                humanAddress: [{ required: true, message: '请输入住址', trigger: 'change' }],
                humanPostcode: [{ required: true, message: '请输入邮编', trigger: 'change' }],
                humanNationality: [{ required: true, message: '请输入选择国籍', trigger: 'change' }],
                humanBirthplace: [{ required: true, message: '请输入出生地', trigger: 'change' }],
                humanBirthday: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
                humanRace: [{ required: true, message: '请选择民族', trigger: 'change' }],
                humanReligion: [{ required: true, message: '请选择宗教信仰', trigger: 'change' }],
                humanParty: [{ required: true, message: '请选择政治面貌', trigger: 'change' }],
                humanIdCard: [{ required: true, message: '请输入身份证号码', trigger: 'change' }],
                humanSocietySecurityId: [{ required: true, message: '请输入社会保障号码', trigger: 'change' }],
                humanAge: [{ required: true, message: '请输入年龄', trigger: 'change' }],
                humanEducatedDegree: [{ required: true, message: '请选择学历', trigger: 'change' }],
                humanEducatedYears: [{ required: true, message: '请选择教育年限', trigger: 'change' }],
                humanEducatedMajor: [{ required: true, message: '请选择学历专业', trigger: 'change' }],
                salaryStandard: [{ required: true, message: '请输入薪酬标准', trigger: 'change' }],
                humanBank: [{ required: true, message: '请输入开户行', trigger: 'change' }],
                humanAccount: [{ required: true, message: '请输入账号', trigger: 'change' }],
                register: [{ required: true, message: '请输入登记人', trigger: 'change' }],
                registTime: [{ required: true, message: '请输入建档时间', trigger: 'change' }],
                humanSpeciality: [{ required: true, message: '请选择特长', trigger: 'change' }],
                humanHobby: [{ required: true, message: '请选择爱好', trigger: 'change' }],
                humanHistroyRecords: [{ required: true, message: '请输入个人履历', trigger: 'change' }],
                humanFamilyMembership: [{ required: true, message: '请输入家庭关系信息', trigger: 'change' }],
                remark: [{ required: true, message: '请输入备注', trigger: 'change' }],
            });

            //当身份证失去焦点时截取出生年月日
            function handleBlur() {
                const now = new Date();
                let year = now.getFullYear()
                let idCard = ruleForm.humanIdCard.substring(6, 14)
                // 将字符串分割成年、月、日
                let year2 = idCard.substring(0, 4);
                let month = idCard.substring(4, 6);
                let day = idCard.substring(6, 8);
                // 转换为 yyyy-MM-DD 格式
                ruleForm.humanBirthday = `${year}-${month}-${day}`;
                ruleForm.humanAge = year - year2
                console.info(ruleForm.humanIdCard.length)
            }

            //添加
            function add() {
                ruleFormRef.value.validate((valid, fields) => {
                    if (valid) {
                        let submitData = {};
                        //const formData = new FormData();
                        // 添加其他表单数据
                        // for (const key in ruleForm) {
                        //     formData.append(key, ruleForm[key]);
                        // }
                        // 添加图片数据
                        // if (selectedFile.value) {
                        //     formData.append('image', selectedFile.value);
                        // }
                        // axios.post('/HF/Upload', formData)
                        //     .then(response => {
                        //         // 假设后端返回的数据结构中有一个字段叫imageUrl表示图片最终地址
                        //         ruleForm.humanPicture = response.data;


                        //     })
                        //     .then(finalResponse => {
                        //         console.log('完整业务处理成功', finalResponse.data);
                        //     })
                        //     .catch(error => {
                        //         //console.error('上传或业务处理失败', error);
                        //         console.error('请求出错:', error);
                        //         if (error.response) {
                        //             // 请求已发送，但服务器响应的状态码不在 2xx 范围内
                        //             console.error('响应状态码:', error.response.status);
                        //             console.error('响应数据:', error.response.data);
                        //         } else if (error.request) {
                        //             // 请求已发送，但没有收到响应
                        //             console.error('没有收到响应:', error.request);
                        //         } else {
                        //             // 在设置请求时发生错误
                        //             console.error('请求设置出错:', error.message);
                        //         }
                        //     });

                        const prefix = 'bt';
                        let randomDigits = '';
                        for (let i = 0; i < 11; i++) {
                            randomDigits += Math.floor(Math.random() * 10); // 生成0-9的随机数字字符
                        }
                        ruleForm.humanId = prefix + randomDigits;//随机生成档案编号
                        for (const key in ruleForm) {
                            if (key !== 'firstKind' && key !== 'humanMajor' && key !== 'humanMajorKind' && key !== 'salaryStandard' && key !== 'secondKind' && key !== 'thirdKind') {
                                submitData[key] = ruleForm[key];
                            }
                        }
                        if ((ruleForm.firstKind && ruleForm.firstKind.firstKindId) && (ruleForm.firstKind && ruleForm.firstKind.firstKindName)) {
                            submitData.firstKindId = ruleForm.firstKind.firstKindId;
                            submitData.firstKindName = ruleForm.firstKind.firstKindName;
                        }
                        if ((ruleForm.secondKind && ruleForm.secondKind.secondKindId) && (ruleForm.secondKind && ruleForm.secondKind.secondKindName)) {
                            submitData.secondKindId = ruleForm.secondKind.secondKindId;
                            submitData.secondKindName = ruleForm.secondKind.secondKindName;
                        }
                        if ((ruleForm.thirdKind && ruleForm.thirdKind.thirdKindId) && (ruleForm.thirdKind && ruleForm.thirdKind.thirdKindName)) {
                            submitData.thirdKindId = ruleForm.thirdKind.thirdKindId;
                            submitData.thirdKindName = ruleForm.thirdKind.thirdKindName;
                        }
                        if ((ruleForm.humanMajorKind && ruleForm.humanMajorKind.majorKindId) && (ruleForm.humanMajorKind && ruleForm.humanMajorKind.majorKindName)) {
                            submitData.humanMajorKindId = ruleForm.humanMajorKind.majorKindId;
                            submitData.humanMajorKindName = ruleForm.humanMajorKind.majorKindName;
                        }
                        if ((ruleForm.humanMajor && ruleForm.humanMajor.majorId) && (ruleForm.humanMajor && ruleForm.humanMajor.majorName)) {
                            submitData.humanMajorId = ruleForm.humanMajor.majorId;
                            submitData.humanMajorName = ruleForm.humanMajor.majorName;
                        }
                        if ((ruleForm.salaryStandard && ruleForm.salaryStandard.standardId) && (ruleForm.salaryStandard && ruleForm.salaryStandard.standardName)) {
                            submitData.salaryStandardId = ruleForm.salaryStandard.standardId;
                            submitData.salaryStandardName = ruleForm.salaryStandard.standardName;
                            submitData.salarySum = ruleForm.salaryStandard.salarySum;
                            submitData.demandSalaraySum = ruleForm.salaryStandard.salarySum;
                            submitData.paidSalarySum = ruleForm.salaryStandard.salarySum;
                        }
                        console.info(submitData)
                        axios.post("/HF/HFAddAsync", {
                            hF: submitData
                        }, {
                            headers: {
                                "content-type": "application/x-www-form-urlencoded",
                                //或其他格式
                            }
                        }).then(res => {
                            console.info(res.data)
                            if (res.data > 0) {
                                // reset()
                                ElMessage({
                                    type: 'success',
                                    message: '登记成功！'
                                });
                                setInterval(()=>{
                                    window.location.href = "/HF/Index1"
                                },1000)
                            } else {
                                ElMessage({
                                    type: 'error',
                                    message: '登记失败！'
                                });
                            }
                        }).catch(error => {
                            console.info(error)
                        })
                    }
                })
            }

            //清除
            function reset() {
                location.reload();
                // imageUrl.value = "";
                // for (const key in ruleForm) {
                //     // 跳过登记时间和登记人属性
                //     if (key === 'registTime' || key === 'register') {
                //         continue;
                //     }
                //     if (typeof ruleForm[key] === 'object' && ruleForm[key] !== null) {
                //         // 如果属性是对象，重置为空对象
                //         ruleForm[key] = {};
                //     } else {
                //         // 如果属性是基本类型，重置为空字符串或默认值
                //         if (key === 'humanFileStatus') {
                //             ruleForm[key] = "正常";
                //         } else if (key === 'checkStatus') {
                //             ruleForm[key] = "未复核";
                //         } else {
                //             ruleForm[key] = "";
                //         }
                //     }
                // }
            }


            watch(() => ruleForm.humanIdCard, (newVal) => {
                if (newVal && newVal.length === 18) { // 确保身份证号长度正确
                    const birthDateStr = `${newVal.substring(6, 10)}-${newVal.substring(10, 12)}-${newVal.substring(12, 14)}`;
                    const birthDate = new Date(birthDateStr);
                    const isValidDate = !isNaN(birthDate.getTime()); // 检查是否为有效日期

                    if (isValidDate) {
                        // 更新生日
                        ruleForm.humanBirthday = birthDateStr;

                        // 计算年龄
                        const today = new Date();
                        let age = today.getFullYear() - birthDate.getFullYear();
                        const m = today.getMonth() - birthDate.getMonth();
                        if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
                            age--;
                        }

                        // 更新年龄
                        ruleForm.humanAge = age;
                    }
                } else {
                    // 如果不是有效的身份证号格式，则清空生日和年龄
                    ruleForm.humanBirthday = '';
                    ruleForm.humanAge = null;
                }
            });



            return {
                one, two, Three, ruleForm, ruleFormRef, CFFKOption, CFFKId, CFSKOption, CFSKId, CFTKOption, CMKOption, CMKId, CMOption, timi,
                HumanProDesignation, sex, HumanNationality, HumanRace, HumanReligion, HumanParty, HumanEducatedDegree, SalaryStandard,
                HumanEducatedYears, HumanEducatedMajor, HumanSpeciality, HumanHobby,
                add, reset, rules,triggerFileInput,onFileChange,avatarUrl
                // add,reset
                // add,reset,handleBlur
            }
        }
    })
    app.use(ElementPlus)
    app.mount("#app");
</script>
<style>
    .el-form-item__content {
        margin-left: 0px !important;
    }
</style>